<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-findSuppliers-container">
      <vm-common-search-view
        :screen="false"
        placeholderV="请输入分类名称"
        ref="searchView"
        @searchList="searchList"
        @vmSearchV="vmSearchV">
        <div slot="searchList" class="searchList" v-if="isShow"  ref="searchList">
          <div class="content">
            <ul v-for="(item, key) in searchListData" :key="key">
              <li @click="choiceItem(item)">{{ item.name }}</li>
            </ul>
          </div>
        </div>
      </vm-common-search-view>
      <tab
        bar-active-color="#d9271b"
        active-color="#d9271a">
        <tab-item selected @on-item-click="onItemClick">材料及设备类供应商</tab-item>
        <tab-item @on-item-click="onItemClick">服务类供应商</tab-item>
      </tab>
      <group class="vm-cellbox">
        <!-- 一级 -->
        <cell-box
          class="vm-cellbox-c"
          @click.native.stop="childItemC(item,key,1)"
          v-for="(item, key) in c_data"
          :key="key">
          <div class="oneLevel">
            <div class="c">
              <i
                :class="['vm-find_suppliers-icon',{'add': !item.childrenData || item.block != true}, {'c-reduce': item.childrenData && item.childrenData.data.length && item.block == true}]"></i>
              <span>{{item.name}}</span>
            </div>
            <div class="r" @click.stop="findSupplier(item)">查看供应商 {{ item.num }}</div>
          </div>
            <!-- 二级 -->
            <cell-box
              v-if="c_data[key].block"
              v-for="(item, index) in c_data[key].childrenData && c_data[key].childrenData.data"
              @click.native.stop="childItemC(item,index,2)"
              :key="index"
              >
              <div class="twoLevel">
                <div class="c">
                  <i :class="['vm-find_suppliers-icon',{'c-add': !item.childrenData || item.block != true}, {'c-reduce': item.childrenData && item.childrenData.length && item.block == true}]"></i>
                  <span>{{item.name}}</span>
                </div>
                <div class="r"  @click.stop="findSupplier(item)">查看供应商 {{ item.num }}</div>
              </div>
              <!-- 三级 -->
              <cell-box
                v-if="item.block" @click.native.stop>

                <div class="threeLevel"
                    v-for="(item, index) in item.childrenData"
                    :key="index">
                    <div class="c">
                      <span>{{item.name}}</span>
                    </div>
                    <div class="r"  @click.stop="findSupplier(item)">查看供应商 {{ item.num }}</div>
                </div>
              </cell-box>
            </cell-box>
        </cell-box>
      </group>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import {Tab, TabItem, Group, Cell, CellBox} from 'vux'
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import vmCommonSearchView from '@/components/vm-common-search-view.vue'
  import { Matchingpurchase_QueryName } from '@/api/matching_purchase.js'
  import { Supplychain_supplyChain, supplychain_getIneList, supplychain_getKeywords } from '@/api/find_suppliers.js'
  export default {
    data() {
      return {
        item: new Object(),
        isShow: false,
        searchListData: new Array(),
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        suppliersToggle: 0,
        c_data: new Array(), // 材料及设备类供应商
      }
    },
    created () {
      this.getOneLevelList();
    },
    methods: {
      initScroll(){
        this.$nextTick(()=>{
          if(!this.myscroll){
              this.myscroll = new BScroll(this.$refs.searchList,{
                click: true
              });
          }else{
              this.myscroll.refresh();
          }
        console.log(this.myscroll);
        })
      },
      // 接受子组件input事件,后端返回数据
      searchList (data) {
        let val = data;
        Matchingpurchase_QueryName({val})
          .then(res => res.data)
          .then(data => {
            if (data.data && data.data.length) {
              this.isShow = true;
              this.searchListData = data.data;
            } else {
              this.isShow = false;
              this.searchListData = new Array();
            }
            this.$nextTick(() => {
              this.initScroll();
            });
          })
      },
      // 接受子组件点击搜索,返回结果
      vmSearchV (data) {
          this.findSupplier(this.item);
      },
      // 当用户点击
      choiceItem (item) {
        this.$refs.searchView.value = item.name;
        this.item = item;
        this.isShow = false;
      },
      onItemClick (index) {
        this.suppliersToggle = index;
      },
      // 获取全部一级分类
      getOneLevelList () {
        Supplychain_supplyChain()
          .then(res => res.data)
          .then(data => {
            if (this.suppliersToggle == 0) {
              this.c_data = data.data.c_data;
            } else if (this.suppliersToggle == 1) {
              this.c_data = data.data.s_data;
            }
          })
      },
      // 点击该项，弹出该项下的所有子项
      childItemC (data,key,level) {
        if (level == 1) {
          // 点击加载二级数据逻辑
          this.$set(this.c_data[key], 'block', !this.c_data[key].block);
          this.c_data[key].ilevel = 2;
        } else if (level == 2) {
          // 点击加载三级数据逻辑
          this.$set(data, 'block', !data.block);
          this.c_data[key].ilevel = 3;
        }
        this.getIneItemList(data, key, level);
      },
      // 获取分类查询下级分类数据
      getIneItemList (_data, key, level) {
        let obj = {};
        obj.inv_id = _data.id;
        obj.ilevel = this.c_data[key].ilevel;
        supplychain_getIneList(obj)
          .then(res => res.data)
          .then(data => {
            if (level == 1) {
              this.$set(_data, 'childrenData', {});
              this.$set(_data.childrenData, 'data', data.data);
            } else if (level == 2) {
              this.$set(_data, 'childrenData', data.data);
            }
          })
      },
      // 点击查看分类供应商
      findSupplier (item) {
        var item = item;
        this.$router.push({
          name: 'find_suppliers.find_suppliers_list',
          query: {
            id: item.id,
            name: item.name,
            num: item.num
          }
        })
      }
    },
    watch: {
      suppliersToggle (newV) {
        this.getOneLevelList();
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-search-view': vmCommonSearchView,
      Tab,
      TabItem,
      Group,
      Cell,
      CellBox
    }
  }
</script>

<style scoped>

  .searchList {
    height: 427px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 65px;
    width: 100%;
    background-color: #ffffff;
    z-index: 1000;
  }
  .searchList ul {
    display: flex;
    flex-direction: column;
  }
  .searchList ul li {
    display: flex;
    align-items: center;
    text-align: left;
    min-height: 70px;
    padding-left: 60px;
    margin-left: 25px;
    margin-right: 25px;
    color: #999999;
    font-size: 28px;
    border-bottom: 1px solid #e5e5e5; /* no */
  }

  .vm-findSuppliers-container {
    height: 100%;
  }
  .vm-cellbox-c {
    padding-left: 35px !important;
    padding-right: 20px !important;
  }
  .vm-cellbox >>> .weui-cell {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .vm-cellbox .oneLevel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-right: 0 !important;
  }
  .vm-cellbox >>> .weui-cell .oneLevel,
  .vm-cellbox >>> .weui-cell .twoLevel,
  .vm-cellbox >>> .weui-cell .threeLevel{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 20px 35px;
    position: relative;
  }
  .vm-cellbox >>> .weui-cell .twoLevel{
    flex-direction: row;
    padding: 0.266667rem 0 0.266667rem 0;
    margin: 0;
  }
  .vm-cellbox >>> .weui-cell .twoLevel:first-child::before {
    display: none;
  }
  .vm-cellbox >>> .weui-cell .twoLevel .weui-cell {
    margin: 20px 20px 20px 35px;
  }
  .vm-cellbox >>> .weui-cell .threeLevel {
    flex-direction: row;
    padding-left: 55px;
  }
  .vm-cellbox >>> .weui-cell .threeLevel .weui-cell {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 0;
  }
  .vm-cellbox >>> .weui-cell .threeLevel span {
    font-size: 28px;
    color: #666666;
    text-align: left;
  }
  .vm-cellbox >>> .weui-cell .twoLevel::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 0.013333rem;
    border-top: 0.013333rem solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 0.2rem;
  }


  .vm-cellbox .twoLevel {
    flex-direction: column;
    padding-buttom: 0 !important;
    margin: 0;
  }
  .vm-cellbox .twoLevel >>> .weui-cell {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  .vm-cellbox >>> .weui-cells {
    margin-top: 0;
  }
  .vm-cellbox .oneLevel .c,
  .vm-cellbox .twoLevel .c{
    display: flex;
    align-items: center;
    text-align: left;
  }


  .vm-cellbox .oneLevel  .c > span,
  .vm-cellbox .twoLevel  .c > span {
    color: #666666;
    display: inline-block;
    padding-left: 58px;
    font-size: 28px;
    color: #333333;
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
  .vm-cellbox .oneLevel .c > .vm-find_suppliers-icon,
  .vm-cellbox .twoLevel .c > .vm-find_suppliers-icon{
    margin-right: 20px;
    position: absolute;
  }
  .vm-cellbox .oneLevel .c > i.add,
  .vm-cellbox .twoLevel .c > i.add{
    width: 38px;
    height: 38px;
    background-position: -30px -64px;
  }
  .vm-cellbox .c > i.c-add {
    width: 38px;
    height: 38px;
    background-position: -101px -64px;
  }
  .vm-cellbox .c > i.c-reduce {
    width: 38px;
    height: 38px;
    background-position: -185px -64px;
  }
  .vm-cellbox .r{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    width: 228px;
    border: 1px solid #f44b50; /* no */
    border-radius: 20px; /* no */
    font-size: 24px;
    color: #f44b50;
  }
</style>

<style lang="scss">
  .vux-tab-wrap {
    margin-top: 15px;
    padding: 0 !important;
    height: 80px !important;
    .vux-tab-container {
      z-index: 998 !important;
      height: 80px !important;
      border-bottom: 1px solid #eeeeee; /* no */
      .vux-tab {
        height: 80px;
        .vux-tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666666;
          font-size: 30px;
        }
      }
    }
  }
</style>
